<template>
  <div id="userManage" class="container-fluid" style="position: relative">
    <div class="space" style="margin-top: 5vh"></div>
    <div class="input-group" style="width: 30%">
      <input
        v-model="userAccount"
        type="text"
        class="form-control"
        placeholder="请输入查询参数"
        @keyup.enter="handleSreach(1)"
      />
      <div class="input-group-append">
        <button type="button" class="btn input-group-text" @click="handleSreach(1)">
          <i class="bi bi-search"></i>
        </button>
      </div>
    </div>

    <table class="table table-striped table-hover table-light align-middle" style="margin-top: 5vh">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">id</th>
          <th scope="col">账号名</th>
          <th scope="col">头像</th>
          <th scope="col">简介</th>
          <th scope="col">创建时间</th>
          <th scope="col">用户角色</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="user.id">
          <th scope="row">{{ index }}</th>
          <td>{{ user.id }}</td>
          <td>{{ user.userAccount }}</td>
          <td class="align-middle">
            <img
              :src="user.userAvatar"
              title="头像"
              style="width: 6vh; border-radius: 50%; vertical-align: middle"
            />
          </td>
          <td>{{ user.userProfile }}</td>
          <td>{{ format(user.createTime, 'yyyy年-MM月-dd日 HH时mm分ss秒') }}</td>
          <td>{{ user.userRole }}</td>
          <td>{{ user.userProfile }}</td>
          <td class="align-middle">
            <div class="d-flex">
              <button type="button" class="btn btn-outline-danger">删除</button>
              <button type="button" class="btn btn-primary">更新</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <nav aria-label="Page navigation example" class="text-center d-flex justify-content-center">
      <ul class="pagination">
        <li class="page-item" @click="handleClickPage(-2)">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li
          :class="'page-item ' + page.isActive"
          v-for="page in pages"
          :key="page.number"
          @click="handleClickPage(page.number)"
        >
          <a class="page-link" href="#">{{ page.number }}</a>
        </li>
        <li class="page-item" @click="handleClickPage(-1)">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { getuserListPage } from '@/api/user.js'
import { useToastStore } from '@/stores/toastStore.js'
import { format } from 'date-fns'

const current = ref(1)
const userName = ref('')
const userRole = ref('')
const sortField = ref('create_time')
const sortOrder = ref('descend')
const userAccount = ref('')

const userList = ref([]) //存放查询结果
const total = ref(0)
const toastStore = useToastStore()
const pages = ref([])

const pagination = computed(() => {
  return {
    current: current.value,
    pageSize: 10,
    userAccount: userAccount.value,
    userName: userName.value,
    userRole: userRole.value,
    sortField: sortField.value,
    sortOrder: sortOrder.value,
  }
})

const handleClickPage = (param) => {
  let currentPage = current.value
  let maxPageNum = parseInt(Math.ceil(total.value / 10))
  console.log('----------------------------------------------------------')
  console.log('param:', param)
  //这里为了方便直接简单让-2表示前一页，-1表示后一页
  if (param == -2) currentPage = currentPage - 1
  else if (param == -1) currentPage = currentPage + 1
  else currentPage = param

  if (currentPage >= 1 && currentPage <= maxPageNum) {
    current.value = currentPage

    console.log('pagination:', pagination.value)
    pull_page(pagination.value)
  }
}

const handleSreach = (param) => {
  if (!userAccount.value) return
  handleClickPage(param)
}

const udpate_pages = () => {
  let new_pages = []
  let maxPageNum = parseInt(Math.ceil(total.value / 10))
  let currentPage = current.value
  for (let i = currentPage - 2; i <= currentPage + 2; i++) {
    if (i >= 1 && i <= maxPageNum) {
      new_pages.push({
        number: i,
        isActive: i === currentPage ? 'active' : '',
      })
    }
  }
  pages.value = new_pages
}

//传入参数即可
const pull_page = async (param) => {
  console.log('执行了111')
  try {
    const res = await getuserListPage(param)
    console.log(res)
    if (Number(res?.data?.data?.code) === 0 && res?.data?.data?.data) {
      userList.value = res.data.data.data
      if (userList.value.length === 0) {
        toastStore.set(true, '无搜索结果')
      }
      userAccount.value = '' //搜索完必须清空
      total.value = res.data.total
      udpate_pages()
    } else {
      console.log('报错')
      toastStore.set(true, res?.data?.data?.message)
    }
  } catch (e) {
    toastStore.set(true, e.message)
  }
}
pull_page(pagination.value)
</script>

<style scoped>
#userManage table td,
#userManage table th {
  vertical-align: middle;
}

/*#userManage table img {
  vertical-align: middle;
}*/

#userManage .btn {
  margin: 0;
}
</style>
